.film-detail
  width: 100vw
  height: 100vh
  overflow: hidden
  overflow-y: auto
  background: var(--bg-base)
  padding-bottom: 50rem
  header
    position: fixed
    inset: 0
    display: grid
    grid-template-columns: 30rem auto 30rem
    align-items: center
    height: 44rem
    padding: 0 8rem
    background: transparent
    transition: all 0.2s ease
    border-bottom: 1rem solid transparent
    .back
      width: 30rem
      height: 30rem
      align-items: center
      display: flex
      justify-content: center
      background: rgba(255, 255, 255, 0.6)
      border-radius: 15rem
      color: var(--color-black)
    h3
      text-align: center
      overflow: hidden
      white-space: nowrap
      text-overflow: ellipsis
      opacity: 0
      transition: opacity 0.2s ease
      font-size: 16rem
  .show
    background: #fff
    border-color: var(--bdc-white)
    h3
      opacity: 1
  .img img
    width: 100%
    height: 210rem
    object-fit: cover
  .film-info
    min-height: 190rem
    padding: 12rem 15rem 15rem
    background: var(--bg-white)
    margin-bottom: 10rem
    .film-title
      height: 24rem
      display: flex
      align-items: center
      font-size: 18rem
      color: var(--color-black)
      .film-filmType
        background: var(--bg-grey)
        color: var(--color-supwhite)
        font-size: 9rem
        padding: 0 2rem
        margin-left: 8rem
      .film-grade
        margin-left: auto
        color: var(--color-yellow)
        font-size: 10rem
        i
          font-size: 18rem
          font-style: italic
  .film-type,
  .film-start,
  .film-runtime
    margin-top: 4rem
    height: 19.5rem
    line-height: 19.5rem
    color: var(--color-white)
    font-size: 13rem
  .film-des
    margin-top: 12rem
    font-size: 13rem
    color: var(--color-white)
    line-height: 1.5
    height: 38rem
    overflow: hidden
    transition: height 0.3s ease
    interpolate-size: allow-keywords
  .openDes
    height: auto
  .film-btn
    margin-top: 5rem
    display: flex
    align-items: center
    justify-content: center
    font-size: 8rem
    color: var(--color-white)
    span
      transition: transform 0.3s ease
  .open span
    transform: rotate(180deg)
  .actor-info,
  .photos-info
    h3
      padding: 15rem
      font-size: 16rem
      color: var(--color-black)
    ul
      padding-left: 15rem
      display: flex
      overflow: hidden
      overflow-x: auto
      width: 100vw
      &::-webkit-scrollbar
        display: none
      li
        margin-right: 10rem
      li:last-child
        margin-right: 15rem

  .actor-info
    background: var(--bg-white)
    height: 192.5rem
    margin-bottom: 10rem
    li
      display: flex
      flex-direction: column
      img
        width: 85rem
        height: 85rem
        object-fit: cover
      span,
      em
        width: 85rem
        overflow: hidden
        white-space: nowrap
        text-overflow: ellipsis
        text-align: center
      span
        padding-top: 10rem
        font-size: 12rem
        color: var(--color-black)
      em
        font-size: 10rem
        color: var(--color-white)
  .photos-info
    height: 177rem
    margin-bottom: 10rem
    background: var(--bg-white)
    h3
      height: 62rem
      display: flex
      div
        color: var(--color-white)
        margin-left: auto
        font-size: 14rem
        span
          font-size: 13rem
          margin-top: 4rem
    img
      width: 150rem
      height: 100rem
      object-fit: cover
  .chose-seat
    position: fixed
    bottom: 0
    left: 0
    width: 100%
    height: 49rem
    background: var(--bg-active)
    color: var(--color-supwhite)
    text-align: center
    line-height: 49rem
    font-size: 16rem
